<!--
 * @Descripttion: 碰撞结果
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 13:13:39
 * @LastEditors: 淏
 * @LastEditTime: 2024-05-03 10:01:23
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-connection"></i>
          <span style="color: #00ffff">数据碰撞</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-steps :active="active" simple style>
          <el-step
            title="步骤 1 选择碰撞左表"
            icon="el-icon-document"
          ></el-step>
          <el-step
            title="步骤 2 选择碰撞右表"
            icon="el-icon-document"
          ></el-step>
          <el-step
            title="步骤 3 数据碰撞入库"
            icon="el-icon-receiving"
          ></el-step>
        </el-steps>
      </div>
      <!--   <div style="text-align: center">
        <el-button
          class="button"
          @click="prev"
          v-waves
          plain
          style="width: 100px"
          v-if="active == 1 || active == 2"
        >
          上一步
        </el-button>
        <el-button
          class="button"
          @click="next"
          v-waves
          plain
          style="width: 100px"
          v-if="active == 0 || active == 1"
        >
          下一步
        </el-button>
        <el-button
          class="button"
          @click="insertData"
          v-waves
          plain
          style="width: 100px"
        >
          开始碰撞
        </el-button>
      </div> -->
      <!-- 步骤 1 选择碰撞左表 -->
      <el-row :gutter="24">
        <el-col :span="8">
          <div style="margin-top: 10px">
            <searchImDataLeft
              ref="leftSearchImData"
              :title="leftTitle"
              :key="0"
              @getColData="getLeftColData"
            ></searchImDataLeft>
          </div>
        </el-col>
        <el-col :span="8">
          <!--! !步骤 2 选择碰撞右表 -->
          <div style="margin-top: 10px">
            <searchImDataRight
              ref="rightSearchImData"
              :title="rightTitle"
              :key="1"
              @getColData="getRightColData"
            ></searchImDataRight>
          </div>
        </el-col>
        <el-col :span="8">
          <!-- 步骤 3 数据碰撞入库 -->
          <div style="margin-top: 10px">
            <el-card class="cleatCard">
              <div slot="header" class="clearfix">
                <el-tag
                  class="button"
                  size="medium"
                  style="font-size: 16px; margin-top: 0"
                >
                  数据碰撞入库
                </el-tag>
                <span class="text"></span>
                <el-button
                  class="button"
                  size="medium"
                  @click="insertData"
                  v-waves
                  plain
                  style="
                    width: 100px;
                    font-size: 16px;
                    margin-top: 0;
                    float: right;
                  "
                >
                  开始碰撞
                </el-button>
              </div>
              <el-form>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="左表列" label-width="100px">
                      <span slot="label">
                        <span class="text">碰撞结果名称</span>
                      </span>
                      <el-input
                        size="mini"
                        style="width: 15vw"
                        v-model="collisionCnName"
                        placeholder="数据集名称"
                        class="handle-input mr10"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="24">
                    <el-form-item label="碰撞类型" label-width="100px">
                      <span slot="label">
                        <span class="text">碰撞类型</span>
                      </span>
                      <el-select
                        v-model="joinTypeId"
                        placeholder="选择规则"
                        class="handle-select mr10"
                        size="mini"
                        :popper-append-to-body="false"
                      >
                        <el-option
                          v-for="item in joinType"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                          @click.native="joinTypeChange(item)"
                        ></el-option>
                      </el-select>
                      <el-popover
                        class="item"
                        placement="right"
                        trigger="hover"
                      >
                        <div class="demo-image">
                          <div style="position: static">
                            <el-image
                              style="width: 70px"
                              :src="joinInfoImg"
                              fit="contain"
                            ></el-image>
                          </div>
                          <el-tag
                            size="medium"
                            style="
                              font-size: 12px;
                              position: relative;
                              margin-top: 1px;
                              margin-left: 2px;
                              background: rgba(0, 0, 255, 0.2);
                              border-radius: 10px;
                              border: 1px solid #295a85;
                              color: #00ffff;
                              text-shadow: 0 0 25px #00ffff;
                              font-weight: 700;
                            "
                          >
                            <span class="demonstration">
                              {{ joinTypeName }}
                            </span>
                          </el-tag>
                        </div>
                        <el-button
                          slot="reference"
                          size="mini"
                          class="button"
                          style="margin-left: 5px"
                          type="success"
                          icon="el-icon-info"
                          circle
                          plain
                        ></el-button>
                      </el-popover>
                    </el-form-item>
                  </el-col>
                  <div
                    v-for="(itemColl, indexColl) in collisionColumnRules"
                    :key="indexColl"
                  >
                    <el-col :span="24">
                      <el-form-item label="左表列" label-width="100px">
                        <span slot="label">
                          <span class="text">左表筛选列</span>
                        </span>
                        <el-select
                          v-model="itemColl.left"
                          placeholder="选择左表列"
                          class="handle-select mr10"
                          size="mini"
                          style="width: 15vw"
                          :popper-append-to-body="false"
                        >
                          <el-option
                            v-for="item in leftTableClo"
                            :key="item.id"
                            :label="item.columnCnName"
                            :value="item.columnEnName"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="碰撞规则" label-width="100px">
                        <span slot="label">
                          <span class="text">碰撞规则</span>
                        </span>
                        <el-select
                          v-model="itemColl.rule"
                          placeholder="选择规则"
                          class="handle-select mr10"
                          size="mini"
                          :popper-append-to-body="false"
                        >
                          <el-option
                            v-for="item in ruleCollisionData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-form-item label="右表筛选列" label-width="100px">
                        <span slot="label">
                          <span class="text">右表筛选列</span>
                        </span>
                        <el-select
                          v-model="itemColl.right"
                          placeholder="选择左表列"
                          class="handle-select mr10"
                          size="mini"
                          style="width: 15vw"
                          :popper-append-to-body="false"
                        >
                          <el-option
                            v-for="item in rightTableClo"
                            :key="item.id"
                            :label="item.columnCnName"
                            :value="item.columnEnName"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="24">
                      <el-tooltip content="添加碰撞条件" placement="left-start">
                        <el-button
                          size="mini"
                          class="button"
                          style="margin-left: 10px"
                          type="success"
                          icon="el-icon-circle-plus-outline"
                          plain
                          @click="addRules(itemColl)"
                        >
                          添加条件
                        </el-button>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        content="删除该条件"
                        placement="right-start"
                      >
                        <el-button
                          size="mini"
                          class="button"
                          style="margin-left: 20px; margin-top: 0"
                          type="danger"
                          icon="el-icon-delete"
                          circle
                          @click="removeCollision(itemColl)"
                        >
                          删除该条件
                        </el-button>
                      </el-tooltip>
                      <el-divider></el-divider>
                    </el-col>
                  </div>
                </el-row>
              </el-form>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import selectImport from '@/components/public/selectImport.vue'
  import selectAllRule from '@/components/select/selectAllRule.vue'
  import searchImDataLeft from './components/searchImDataLeft.vue'
  import searchImDataRight from './components/searchImDataRight.vue'
  import { query_rule, collision_import, getAll_joinType } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'collisionResult',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {
      selectImport,
      selectAllRule,
      searchImDataLeft,
      searchImDataRight,
    },
    // 组件状态值
    data() {
      return {
        joinType: [], //碰撞类型数组
        joinTypeId: 7,
        joinTypeName: '全连接',
        joinInfoImg: require('@/assets/img/icon/全连接.png'), //碰撞类型描述图片
        leftTitle: '左表数据筛选',
        rightTitle: '右表数据筛选',
        active: 0,
        ruleType: 'query',
        ruleCollisionData: '',
        leftTableClo: [],
        rightTableClo: [],
        leftTable: {
          importId: '',
          tableColumns: [],
        },
        rightTable: {
          importId: '',
          tableColumns: [],
        },
        leftTableQueryRules: [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
              },
            ],
          },
        ],
        rightTableQueryRules: [
          {
            columnEnName: '',
            rule: [
              {
                ruleName: '',
                value1: '',
                isV1Filed: '',
                value2: '',
                isV2Filed: '',
                valueCount: '',
              },
            ],
          },
        ],
        collisionCnName: '',
        collisionColumnRules: [
          {
            left: '',
            right: '',
            rule: '',
          },
        ],
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      getRuleCollision() {
        let params = new URLSearchParams()
        params.append('type', 'collision')
        query_rule(params).then((res) => {
          this.ruleCollisionData = res.data
        })
      },
      getJoinType() {
        getAll_joinType().then((res) => {
          this.joinType = res.data
        })
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      //步骤条上一步按钮
      prev() {
        this.active -= 1
      },
      //步骤条下一步按钮
      next() {
        switch (this.active) {
          case 0:
            this.$refs['leftSearchImData'].saveData()
            this.active += 1
            /*  this.$refs['leftSearchImData'].clearData() */
            break
          case 1:
            this.$refs['rightSearchImData'].saveData()
            this.active += 1
            /* this.$refs['rightSearchImData'].clearData() */
            break
          default:
            break
        }
      },
      insertData() {
        if (
          this.collisionColumnRules.length == 0 ||
          this.collisionColumnRules[0].left == ''
        ) {
          this.$message({
            type: 'error',
            message: '请正确选择碰撞数据！',
          })
        } else if (this.collisionColumnRules[0].rule == '') {
          this.$message({
            type: 'error',
            message: '请正确选择碰撞规则！',
          })
        } else {
          let _this = this
          let leftTable = JSON.stringify(this.leftTable)
          let rightTable = JSON.stringify(this.rightTable)
          let leftTableQueryRules = JSON.stringify(this.leftTableQueryRules)
          let rightTableQueryRules = JSON.stringify(this.rightTableQueryRules)
          let collisionColumnRules = JSON.stringify(this.collisionColumnRules)
          let collisionCnName = this.collisionCnName
          let joinTypeId = this.joinTypeId
          var qs = require('qs')
          var data = qs.stringify({
            leftTable: leftTable,
            rightTable: rightTable,
            leftTableQueryRules: leftTableQueryRules,
            rightTableQueryRules: rightTableQueryRules,
            collisionColumnRules: collisionColumnRules,
            collisionCnName: collisionCnName,
            joinTypeId: joinTypeId,
          })
          this.$loading.show()
          collision_import(data)
            .then((res) => {
              console.log(res)
              if (res.code == 1) {
                this.$confirm(
                  res.message + '，请在碰撞结果页面查看数据！',
                  '提示',
                  {
                    showCancelButton: false,
                    confirmButtonText: '确定',
                    type: 'success',
                  }
                ).then(() => {
                  let imports = {
                    importData: {
                      createTime: '',
                      id: res.data,
                      name: '',
                      type: '',
                    },
                  }
                  this.$router.push({
                    path: '/resultData',
                    query: {
                      chooseImport: imports,
                    },
                  })
                })
              } else {
                this.$notify.error({
                  title: '碰撞失败！',
                  message: res.message,
                  duration: 0,
                })
              }
              this.$loading.close()
            })
            .catch((err) => {
              this.$loading.close()
            })
        }
      },
      /* 左表组件数据返回 */
      getLeftColData(table, tableClo, tableQueryRules) {
        console.log('table, tableClo, tableQueryRules')
        console.log(table, tableClo, tableQueryRules)
        if (table != undefined) {
          this.leftTable = table
        }
        if (tableClo != undefined) {
          this.leftTableClo = tableClo
        }
        if (tableQueryRules != undefined) {
          this.leftTableQueryRules = tableQueryRules
        }
      },
      /* 右表组件数据返回 */
      getRightColData(table, tableClo, tableQueryRules) {
        if (table != undefined) {
          this.rightTable = table
        }
        if (tableClo != undefined) {
          this.rightTableClo = tableClo
        }
        if (tableQueryRules != undefined) {
          this.rightTableQueryRules = tableQueryRules
        }
      },
      //新增条件
      addRules() {
        this.collisionColumnRules.push({
          name: '',
          value1: '',
          value2: '',
        })
      },
      //删除条件
      removeCollision(item) {
        var index = this.collisionColumnRules.indexOf(item)
        if (this.collisionColumnRules.length != 1) {
          if (index !== -1) {
            this.collisionColumnRules.splice(index, 1)
          }
        }
      },
      joinTypeChange(val) {
        console.log(val)
        this.joinTypeId = val.id
        this.joinTypeName = val.name
        switch (this.joinTypeId) {
          case 1:
            this.joinInfoImg = require('@/assets/img/icon/内连接.png')
            break
          case 2:
            this.joinInfoImg = require('@/assets/img/icon/左连接.png')
            break
          case 3:
            this.joinInfoImg = require('@/assets/img/icon/右连接.png')
            break
          case 4:
            this.joinInfoImg = require('@/assets/img/icon/左差连接.png')
            break
          case 5:
            this.joinInfoImg = require('@/assets/img/icon/右差连接.png')
            break
          /*   case 6:
            this.joinInfoImg = require('@/assets/img/icon/合并.png')
            break */
          case 7:
            this.joinInfoImg = require('@/assets/img/icon/全连接.png')
            break
          default:
            break
        }
      },
    },
    created() {},
    mounted() {
      this.getRuleCollision()
      this.getJoinType()
    },
  }
</script>

<style scoped>
  .button {
    margin-top: 13px;
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
  .cleatCard {
    background: rgba(48, 89, 224, 0.3);
    border: 1px solid #295a85;
    overflow: auto; /* 自动开启滚动条 */
    height: calc(100vh - 280px); /* 设置最大高度 */
  }
  .container {
    height: 100%; /* 设置最大高度 */
  }
</style>
<style lang="less" scoped>
  /deep/.el-steps--simple {
    background: #00ffff70;
  }
  /deep/.el-step__head.is-finish {
    color: #00ffff !important;
  }
  /deep/.el-step__title.is-finish {
    color: #00ffff !important;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  /deep/.el-step__title.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/.el-step__head.is-process {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__head.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/ .el-step__title.is-wait {
    color: #ffffff !important;
    text-shadow: 0 0 25px #ffffff;
  }
  /deep/.el-card__header {
    border-bottom: 1px solid #00ffff;
  }
  /deep/.el-tag.el-tag--info {
    background: #00ffff70;
    border-color: #00ffff;
    color: #ffffff;
  }
  /deep/ .el-divider--horizontal {
    margin: 6px;
    margin-top: 5px;
    background: #00ffff;
  }
</style>
<style>
  .el-popover {
    border-radius: 5px;
    min-width: 0;
    background: rgba(48, 89, 224, 0.8);
  }
</style>
